<template>
	<view class="container">
		<view class="search">
			<view class="input">
				<view class="flex align-center" style="background: #f3f3f3; border-radius: 8rpx; padding: 14rpx 24rpx">
					<view style="font-size: 0; margin-right: 14rpx">
						<image style="width: 40rpx; height: 40rpx" src="./static/10.png"></image>
					</view>
					<input @input="search" class="flex-1" type="text" v-model="keyWords" placeholder="电话/昵称搜索" />
				</view>
			</view>

			<view class="top">
				<view :class="tabId == 1 ? 'topItem borderLine' : 'topItem'" @click="changeTab(1)">店铺会员审核</view>
				<view :class="tabId == 2 ? 'topItem borderLine' : 'topItem'" @click="changeTab(2)">立即到账审核</view>
			</view>
		</view>
		<!-- 店铺会员审核 -->
		<block v-if="tabId == 1">
			<view v-if="!peopleList.length" style="padding-top: 100rpx">
				<u-empty text="暂无待审核的申请" mode="list"></u-empty>
			</view>
			<block v-else>
				<view class="item" v-for="(item, index) in peopleList" :key="index">
					<view class="box">
						<view class="head">
							<image class="avatar" :src="item.avatar"></image>
							<view class="user">
								<view class="name">{{ item.nickname }}{{ item.name ? `（${item.name}）` : '' }}</view>
								<view class="tel">{{ item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3') }}</view>
							</view>
						</view>
						<view class="btn" v-if="item.is_sh == 0" @click="handleCheck(item)">审核</view>
						<view class="text" v-else-if="item.is_sh == 1">
							<image class="icon" src="@/static/Frame.png"></image>
							审核通过
						</view>
						<view class="error" v-else-if="item.is_sh == 2">
							<image class="icon" src="@/static/jue.png"></image>
							审核拒绝
						</view>
					</view>
					<view class="box">
						<view class="msg">锁定总金额：{{ item.quota }} 元</view>
						<view class="msg">提交人：{{ item.create_user }}</view>
					</view>
					<view class="box" v-if="item.is_sh > 0">
						<view class="msg">审核日期：{{ item.audit_time }}</view>
						<view class="msg">审核人：{{ item.audit_user }}</view>
					</view>
				</view>
			</block>
		</block>
		<!-- 立即到账审核 -->
		<block v-if="tabId == 2">
			<view v-if="!rebaseList.length" style="padding-top: 100rpx">
				<u-empty text="暂无待审核的申请" mode="list" v-if="rebaseList.length == 0"></u-empty>
			</view>
			<block v-else>
				<view class="item" v-for="(item, index) in rebaseList" :key="index">
					<view class="box">
						<view class="head">
							<image class="avatar" :src="item.user.avatar"></image>
							<view class="user">
								<view class="name">{{ item.user.nickname }}{{ item.user.name ? `（${item.user.name}）` : '' }}</view>
								<view class="tel">{{ item.user.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3') }}</view>
							</view>
						</view>
						<view class="btn" v-if="item.status == 0" @click="handleCheckMoney(item)">审核</view>
						<view class="text" v-else-if="item.status == 1">
							<image class="icon" src="@/static/Frame.png"></image>
							<text>审核通过</text>
						</view>
						<view class="error" v-else-if="item.status == 2">
							<image class="icon" src="@/static/jue.png"></image>
							<text>审核拒绝</text>
						</view>
					</view>
					<view class="box">
						<view class="msg">订单号：{{ item.order_sn }}</view>
						<view class="msg">锁定金额：{{ item.money }} 元（消费)</view>
					</view>
					<view class="box" v-if="item.status > 0">
						<view class="msg">审核日期：{{ item.audit_time }}</view>
						<view class="msg">审核人：{{ item.audit_user }}</view>
					</view>
				</view>
			</block>
		</block>
		<!-- 店铺会员审核 -->
		<uni-popup ref="tips" type="center">
			<view class="tips">
				<view class="title">新增店铺会员审核</view>
				<view class="content">
					<view class="input"><input type="text" v-model="checkItem.name" disabled /></view>
					<view class="input"><input type="text" v-model="checkItem.quota" disabled /></view>
					<!-- <view>真实姓名：{{ checkItem.name }}</view>
					<view>锁定金额：{{ checkItem.quota }}</view> -->
				</view>
				<view class="btn-group">
					<view class="btn cancel" @click="handleToExamine('2')">拒绝</view>
					<view class="btn confirm" @click="handleToExamine('1')">同意</view>
				</view>
			</view>
		</uni-popup>
		<!-- 立即到账审核 -->
		<uni-popup ref="checkBlock" type="center">
			<view class="tips">
				<view class="title">申请提前到账是否同意</view>
				<view class="content">
					<view class="input"><input type="text" v-model="itemData.user.name" disabled /></view>
					<view class="input"><input type="text" v-model="itemData.money" disabled /></view>
					<!-- <view>真实姓名: {{ itemData.user.name }}</view>
					<view>锁定金额: ￥{{ itemData.money }}</view> -->
				</view>
				<view class="btn-group">
					<view class="btn cancel" @click="checkMoneyHandle(2)">驳回</view>
					<view class="btn confirm" @click="checkMoneyHandle(1)">通过</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabId: 1,
			page: 1,
			peopleList: [],
			rebaseList: [],
			resbaseData: null,
			shop_id: '',
			uid: '',
			checkItem: null,
			itemData: null,
			keyWords: ''
		};
	},
	onLoad(options) {
		let option = JSON.parse(options.data);
		this.uid = option.uid;
		this.shop_id = option.shop_id;
		this.getList();
	},
	onReachBottom() {
		if (this.page < this.lastPage) {
			this.page++;
			this.getList();
		} else {
			this.$wanlshop.msg('我是有底线的');
		}
	},
	methods: {
		getReabseList() {
			this.$request({
				url: 'member/rebate_check_list',
				method: 'POST',
				data: {
					shop_id: this.shop_id
				}
			}).then((res) => {
				const { code, data } = res.data;
				if (code == 1) {
					this.rebaseList = data.data;
				}
			});
		},
		search() {
			this.page = 1;
			this.getList();
		},
		getList() {
			this.$request({
				url: 'wokers/worker_list',
				method: 'POST',
				data: {
					shop_id: this.shop_id,
					order: 'a.updatetime',
					sort: 'desc',
					keyword: this.keyWords,
					page: this.page,
					is_sh: 1
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					data.data.map((item) => {
						if (!item.name) {
							if (!item.true_name) {
								item.name = item.nickname;
							} else {
								item.name = item.true_name;
							}
						}
					});
					if (this.page == 1) {
						this.peopleList = data.data;
					} else {
						this.peopleList.push(...this.peopleList, ...data.data);
					}
					this.lastPage = data.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
			});
		},
		changeTab(e) {
			this.tabId = e;
			if (e == 1) {
				this.getList();
			} else {
				this.getReabseList();
			}
		},
		// 立即到账审核
		handleCheckMoney(item) {
			this.itemData = item;
			this.$refs.checkBlock.open();
		},
		// 立即到账审核操作
		checkMoneyHandle(type) {
			let that = this;
			this.$request({
				url: 'member/rebate_check_all',
				method: 'post',
				data: {
					id: that.itemData.id,
					order_id: that.itemData.order_id,
					state: type
				}
			}).then((res) => {
				const { code, msg } = res.data;
				if (code == 1) {
					uni.showToast({
						icon: type == 1 ? 'success' : 'error',
						title: type == 1 ? '审核成功' : '已拒绝'
					});
					if (that.tabId) {
						that.getReabseList();
					} else {
						that.getList();
					}
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
				that.itemData = null;
				that.$refs.checkBlock.close();
			});
		},
		// 店铺会员审核
		handleCheck(item) {
			if (!item.name?.length) {
				item.name = item.true_name ? item.true_name : item.nickname;
			}
			this.checkItem = item;
			this.$refs.tips.open();
		},
		/*店铺会员审核
		 * type = 1 => 通过，type = 2 => 驳回
		 */
		handleToExamine(type) {
			let that = this;
			this.$request({
				url: 'wokers/user_check',
				method: 'POST',
				data: {
					shop_id: that.shop_id,
					uid: that.checkItem.id,
					type: type
				}
			}).then((res) => {
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.msg,
						icon: 'success'
					});
					that.getList();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					});
				}
				that.checkItem = null;
				that.$refs.tips.close();
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
}
.search {
	padding-top: 40rpx;
	.input {
		width: 686rpx;
		margin: 0 auto;
	}
	.top {
		width: 100%;
		display: flex;
		margin-top: 22rpx;
		border-bottom: 20rpx solid #f3f3f3;
		.topItem {
			width: 50%;
			text-align: center;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 30rpx;
			color: #333333;
		}
		.borderLine {
			border-bottom: 2px solid #333333;
		}
	}
}
.item {
	padding: 20rpx 32rpx;
	border-bottom: 2px solid rgba(244, 245, 249, 1);
	.box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.avatar {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
			.user {
				padding-left: 20rpx;
			}
			.name {
				height: 42rpx;
				margin-bottom: 8rpx;
				line-height: 36rpx;
				font-size: 30rpx;
				color: #333;
			}
			.tel {
				height: 36rpx;
				line-height: 32rpx;
				font-size: 26rpx;
				color: #999;
			}
		}
		.msg {
			margin-top: 14rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #999;
		}
		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 6rpx;
			vertical-align: middle;
		}
		.text {
			font-size: 24rpx;
			color: #999;
			text {
				vertical-align: middle;
			}
		}
		.error {
			font-size: 24rpx;
			color: #e92727;
		}
		.btn {
			width: 92rpx;
			height: 52rpx;
			border-radius: 8rpx;
			background: linear-gradient(154deg, rgba(228, 183, 127, 1) 0%, rgba(205, 156, 97, 1) 100%);
			color: #fff;
			font-size: 26rpx;
			text-align: center;
			line-height: 52rpx;
		}
	}
}
.tips {
	width: 600rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	.title {
		padding-top: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 50rpx;
	}
	.content {
		padding-top: 32rpx;
		font-size: 32rpx;
		color: #333;
		line-height: 48rpx;
		.input {
			padding: 0 20rpx;
			height: 68rpx;
			margin-bottom: 40rpx;
			border: 2rpx solid #cdcdcd;
			border-radius: 34rpx;
			input {
				height: 100%;
			}
		}
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 66rpx;
	}
	.btn {
		width: 260rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
}
</style>
